<template>
	<div class="shopcar-container">
		<div class="goodslist">
			<!-- 商品列表项区域 -->
			<div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch
							v-model="$store.getters.getGoodsSelected[item.id]"
							@change="
								selectedChanged(
									item.id,
									$store.getters.getGoodsSelected[item.id]
								)
							"
						></mt-switch>
						<img :src="item.thumb_path" />
						<div class="info">
							<h1>{{ item.title }}</h1>
							<p>
								<span class="price"
									>￥{{ item.sell_price }}</span
								>
								<numbox
									:initcount="
										$store.getters.getGoodsCount[item.id]
									"
									:goodsid="item.id"
								></numbox>
								<!-- 获取购物车中商品的数量 -->
								<!-- 1. 创建一个空对象，下蹲换购物车中所有商品的列表，把当前循环这条商品的Id，作为对象的属性名，count值作为对象的属性值。循环商品列表完毕得到一个对象：{ 88: 2, 89: 1, 90: 4 } -->
								<a href="#" @click.prevent="remove(item.id, i)"
									>删除</a
								>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 结算区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner jiesuan">
					<div class="left">
						<p>总计（不含运费）</p>
						<p>
							已勾选商品
							<span class="red">{{
								$store.getters.getGoodsCountAndAmount.count
							}}</span>
							件，总价 ￥
							<span class="red">{{
								$store.getters.getGoodsCountAndAmount.amount
							}}</span>
						</p>
					</div>
					<mt-button type="danger">去结算</mt-button>
				</div>
			</div>
		</div>

		<p>{{ $store.getters.getGoodsSelected }}</p>
	</div>
</template>

<script>
import numbox from '../subcomponents/shopcar_numbox.vue'
export default {
	data () {
		return {
			goodslist: [],  // 购物车中所有商品的数据
		}
	},
	created () {
		this.getgoodsList()
	},
	methods: {
		getgoodsList () {
			// 获取购物车商品列表
			// 1. 获取到 store 中所有的商品的ID，拼接出一个 用逗号分隔的字符串
			var idArr = []
			this.$store.state.car.forEach(item => idArr.push(item.id))
			// 判断idArr是否为空，如果购物车中没有商品则返回，不需要请求数据接口，否则会报错
			if (idArr.length <= 0) {
				return
			}
			this.$http.get('api/goods/getshopcarlist/' + idArr.join(',')).then(result => {
				if (result.body.status === 0) {
					this.goodslist = result.body.message
				}
			})
		},
		remove (id, index) {
			// 点击删除。把商品从 store 中根据 传递的id 删除，同时把 当前组件中的 goodslist中，对应要删除的那个商品，使用index来 删除
			this.goodslist.splice(index, 1)
			this.$store.commit('removeFormCar', id)
		},
		selectedChanged (id, val) {
			// 每当点击开关，把最新的 开关状态 ，同步到store
			// console.log(id + '::' + val);
			this.$store.commit('updateGoodsSelected', { id, selected: val })
		},
	},
	components: {
		numbox
	}
}
</script>

<style lang="scss" scoped>
.shopcar-container {
	background-color: #eee;
	overflow: hidden;
	.goodslist {
		.mui-card-content-inner {
			display: flex;
			align-items: center;
		}
		img {
			width: 60px;
			height: 60px;
		}
		h1 {
			font-size: 13px;
		}
		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.price {
				color: red;
				font-weight: bold;
			}
		}
	}
	.jiesuan {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.red {
			color: red;
			font-weight: bold;
			font-size: 16px;
		}
	}
}
</style>